<template>
  <label role="checkbox" :class="['switch', { toggled }]">
    <input type="checkbox"
           class="switch-input"
           @change="toggle"/>
    <div class="switch-core"
         :style="{backgroundColor: toggled ? colorChecked  : colorUnchecked}">
      <div class="switch-button"
           :style="{transition: `transform ${speed}ms`,
           transform: toggled ? null: `translate3d(32px, 0px, 0px)`}">
      </div>
    </div>
    <span class="switch-label label-right"
          v-if="toggled"
          v-html="labelChecked">
     </span>
    <span class="switch-label label-left"
          v-html="labelUnchecked" v-else>
    </span>
  </label>

</template>

<script>
import { ACCESS_TOKEN } from "@/store/mutation-types"
import Vue from 'vue'

export default {
  name: 'PassAway',
  data () {
    return {
      toggled: this.value,
      colorChecked: '#25b9e9',
      colorUnchecked: '#db572e',
      labelChecked: '开',
      labelUnchecked: '关',
      record:{
        type: Object
      },
    }
  },
  props: {
    value: {
      type: Boolean,
      //default: true
    },
    speed: {
      type: Number,
      default: 100
    },
    spareId:{
      type: String
    },

  },
  watch:{

    record(newrecord) {
        console.log("监听中打印"+newrecord.id);
      let passAwayState;
      switch (this.spareId) {
        case 'lighting':
          passAwayState=newrecord.airSwitchStateCode.substring(1,2);
          break;
        case 'aircondition':
          passAwayState=newrecord.airSwitchStateCode.substring(2,3);
          break;
        case 'Socket':
          passAwayState=newrecord.airSwitchStateCode.substring(3,4);
          break;
        case 'Spare':
          passAwayState=newrecord.airSwitchStateCode.substring(4,5);
          break;
      }
        console.log("监听中打印状态码:"+passAwayState);
      if(passAwayState=="1"){
        this.toggled=true;
      }else{
        this.toggled=false;
      }

      },


  },
  created() {

    this.initSwitch();

  },

  methods: {
    toggle (event) {
      this.toggled = !this.toggled
      this.$emit('change', event)

	  let sta;
    let passAway;
	  if(this.toggled){
		sta="1";
	  }
		else{
		sta="0";
		}
      switch (this.spareId) {
        case 'lighting':
          this.passAway="1";
            break;
        case 'aircondition':
          this.passAway="2";
          break;
        case 'Socket':
          this.passAway="3";
          break;
        case 'Spare':
          this.passAway="4";
          break;
      }
      const token=Vue.ls.get(ACCESS_TOKEN);
     const message = {"mac":this.record.switchAddress,"state_id":sta,"passlist":this.passAway};
      console.log("打印宿舍令牌"+Vue.ls.get(ACCESS_TOKEN));
      console.log("打印宿舍id"+message.passlist);
      console.log("打印作用域id:"+this.spareId);
      this.$axios.post(
        'http://47.101.51.162:8080/jeecg-boot/airSwitch/sysAirSwitch/openOrClosePasswayByMac',message,
        {
          headers: {
            authorization: 'authorization-text',"X-Access-Token":token
          }
        }
      ).then((response) =>{
        console.info("已返回数据");
        console.log("返回数据是"+response.data);
        console.log(response);
        this.users = response.data;
        var flag = response.data.code;
        if(flag=="200"){
          this.$emit('ok');
        }else {
          alert("连接断开");
        }
      })
    },
  }
}
</script>

<style lang="scss" scoped>

.switch {
  display: inline-block;
  position: relative;
  overflow: hidden;
  vertical-align: middle;
  user-select: none;
  font-size: 10px;
  cursor: pointer;

  .switch-input {
    display: none;
  }

  .switch-label {
    position: absolute;
    top: 0;
    font-weight: 600;
    color: white;

    z-index: 2;

    &.label-left {
      left: 10px;
      line-height: 20px;
      border-top-left-radius: 2px;
      border-bottom-left-radius:2px;
    }

    &.label-right {
      right: 10px;
      line-height: 20px;
      border-top-right-radius: 2px;
      border-bottom-right-radius:2px;
    }
  }

  .switch-core {
    display: block;
    position: relative;
    box-sizing: border-box;
    outline: 0;
    margin: 0;
    transition: border-color .3s, background-color .3s;
    user-select: none;
    width: 64px;
    height: 20px;
    border-radius: 4px;
    line-height: 20px;

    .switch-button {
      width: 32px;
      height: 20px;
      display: block;
      position: absolute;
      overflow: hidden;
      top: 0;
      left: 0;
      z-index: 3;
      transform: translate3d(0, 0, 0);
      background-color: #ecf0f5;
    }
  }
}
</style>
